<template>
  <view class="wcb-rl">
    <view :class="{'wcb-rl-item': true,'wcb-rl-item-select': item.date === currentDate}" v-for="(item,idx) in dateList" :key="idx" @click="selectDate(idx)">
      <view class="wcb-rl-item-date">{{item.shortDate}}</view>
      <view class="wcb-rl-item-week">{{item.dayOfWeek}}</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      dateList: [],
      currentDate: ''
    };
  },
  created(){
    this.dateList = this.get14DayJson();
    this.currentDate = this.dateList[0].date;
    this.$emit('dateChange',this.dateList[0]);
  },
  methods:{
    selectDate(idx){
      this.currentDate = this.dateList[idx].date;
      this.$emit('dateChange',this.dateList[idx]);
    },
    get14DayJson(){
      const result = [];
      const today = new Date();
      const weekdays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
      for (let i = 0; i < 14; i++) {
        const date = new Date(today);
        date.setDate(today.getDate() + i);
        const month = date.getMonth() + 1;
        const day = date.getDate();
        const dateStr = date.getFullYear() +"-"+ (month < 10? "0" + month:month)+"-" + (day < 10?"0" + day:day)
        const shortDateStr = (month < 10? "0" + month:month)+"-" + (day < 10?"0" + day:day)
        let dayOfWeek = weekdays[date.getDay()];
        if (i === 0) dayOfWeek = '今天';
        else if (i === 1) dayOfWeek = '明天';
        else if (i === 2) dayOfWeek = '后天';
          result.push({
          date: dateStr,
          dayOfWeek: dayOfWeek,
          timestamp: date.getTime(),
          shortDate: shortDateStr
        });
      }
      return result;
    }
  }
}
</script>

<style lang="scss">
.wcb-rl::-webkit-scrollbar{
  display: none;
}
.wcb-rl{
  background: #FFFFFF;
  display: flex;
  overflow-y: scroll;
  scrollbar-width: none;
  flex-wrap: nowrap;
  .wcb-rl-item{
    margin: 10rpx;
    padding: 10rpx 10rpx;
    border-radius: 10rpx;
    font-size: 22rpx;
    text-align: center;
    .wcb-rl-item-date{
      padding-bottom: 6rpx;
      width: 60rpx;
    }
    .wcb-rl-item-week{
      font-size: 20rpx;
    }
  }
  .wcb-rl-item-select{
    background: #2979ff;
    color: white;
  }
}
</style>
